<template>
	<!-- <div class="swiper-container" @click="add()">
  <div class="swiper-wrapper" >
  	<div class="swiper-slide" v-for="item in this.options.items"><img :src="item.img_url" alt=""></div>
    
  </div>
</div> -->
<div>
	 <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide v-for="item in this.options.items">
                    <img :src="item.img_url">
                </swiper-slide>
                <!-- Optional controls -->
                <div class="dian">
                    <div class="swiper-pagination" slot="pagination"></div>
                </div>
            </swiper>
</div>
</template>
<script>
// import Swiper from 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default{
		props:['options'],

		data(){
			return {
				bannerData:this.options.items,
				 swiperOption: {
                    autoplay: 1000,
                    direction : 'horizontal',
                    pagination : '.swiper-pagination',
                }

				
				
					}
		},
		mounted(){
	// var mySwiper = new Swiper('.swiper-container', {
	// 			autoplay: 1000,//可选选项，自动滑动
	// 			});
	// 			console.log(mySwiper)
		},
		created(){

		

		},
		methods:{
			add(){
				console.log(this.options.items)
				console.log(this.bannerData)
			},

		},
		   computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        }


		
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
// computed: {
	
// 	return mySwiper;
//     // swiper() {
//     //     return this.$refs.mySwiper.swiper
//     // }
// }
	}
</script>
<style scroped>
	.swiper-slide img{
		width: 100%;

	}
</style>